웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
# code 태그란? 사용 예제
; code 태그는 html에서 컴퓨터에 사용되는 코드의 조각을 나타낼 때 사용합니다. 예를 들어 변수 및 속성, XML 이름, 파일 이름 등이 이에 해당합니다. 아래처럼 코드를 모니터에 출력하는 경우 code태그를 사용합니다.
<html>
<body>
<span>지역 변수의 선언 ... <code>var test = 'Keep going'</code></span>
// 변수를 선언하는 경우
<span>아래의 이미지가 사용됩니다... <code>'test.jpg'</code></span>
// 이미지 이름을 나타내는 경우
</body>
</html>
<body>
<span>지역 변수의 선언 ... <code>var test = 'Keep going'</code></span>
// 변수를 선언하는 경우
<span>아래의 이미지가 사용됩니다... <code>'test.jpg'</code></span>
// 이미지 이름을 나타내는 경우
</body>
</html>
# code 태그의 특징
; 기본 폰트로 font-family 속성이 monospace로 지정됩니다. 또한 코드 태그는 display: block의 값을 가지기 때문에 inline 요소에서 사용할 경우 아래와 같은 방법을 고려해야합니다.
i. pre 코드를 함께 사용
코드가 약간 복잡해 보일 수 있으나 inline 요소인 pre 태그와 함께 사용하는 방법으로 간단합니다. 예제 A를 참고<span>지역 변수의 선언 ... <pre><code>var test = 'Keep going'</code><pre></span>
ii. class를 이용하거나 inline style을 사용하는 방법
미리 CSS에 클래스를 선언하는 방법으로 코드가 간결합니다. 예제 B 참고<span>아래의 이미지가 사용됩니다... <code class='inline'>'test.jpg'</code></span>
// 클래스에 미리 선언하여 inline요소에는 inline 값을 block속성에는 block 클래스를 지정하는 방법
<style type="text/css">
code.inline { display: inline; }
code.block { display: block; }
</style>
// 클래스에 미리 선언하여 inline요소에는 inline 값을 block속성에는 block 클래스를 지정하는 방법
<style type="text/css">
code.inline { display: inline; }
code.block { display: block; }
</style>
! 참고사항
변수나 속성명등이 아닌 실제 html 코드를 출력하고 싶은 경우는 다른 방법을 사용해야 합니다. 아래의 링크를 참고하세요!
관련 링크바로가기 > http://webisfree.com/2014-08-19/pre-%ED%83%9C%EA%B7%B8%EC%99%80-xmp-%ED%83%9C%EA%B7%B8%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%A4%84%EB%B0%94%EA%BF%88-%EB%B0%8F-%EB%AA%A8%EB%93%A0-%EA%B2%83
아래의 글도 찾고 계시지 않나요?